<template>
  <div class="infinite-container" ref="scroller">
    <select-role2 @familychang="selperson" :needCertificate="0" ref="childRole"></select-role2>
    <div class="greenTop">
      <div class="select-role flex flex_between">
        <div class="roleRight flex flex_vcenter">
          <i class="w-icon w-icon-icon_common_jzr2 v-middle inline-block"></i>
          <span class="text-bigger pl10">{{familyPerson.realname}}</span>
        </div>
        <div class="roleLeft flex flex_vcenter" @click="$refs.childRole.show()">
          <span class="text-bigger">切换就诊人</span>
          <i class="iconfont icon-small-arrow-right color-white text-bigger" />
        </div>
      </div>
    </div>
    <div class="bgwhite pd10">
      <empty v-if="isEmpty"></empty>
      <div v-else>
        <p class="content-title"><span>请选择需要提醒的药品</span></p>
        <template v-for="(item, index) in list">
          <div class="flex flex_vcenter med_item" :key="item.prescriptionId" @click="clickHandler(item)">
            <div class="leftIcon">
              <i class="iconOk" v-if="item.checked"></i>
              <i class="iconOkGray" v-else></i>
            </div>
            <div>
              <div class="drug-name">{{item.drugName}} <span>{{item.dose}}</span></div>
              <div class="drug-instr">{{item.takeWay}} <span class="pl10">{{item.methodName}}</span> <span class="pl10">{{item.dosage}}</span></div>
              <div class="remind_time">
                提醒时间 {{item.rateHisTime}}
              </div>
            </div>
          </div>
          <div class="divider" v-if="index < list.length - 1" :key="item.prescriptionId"></div>
        </template>
        <!-- <div class="mt10 mb10 t3 center" v-show="!scroller">已全部加载完毕</div> -->
        <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="getList" />
      </div>
    </div>

    <div class="bottom-sheet flex">
      <mu-raised-button replace to="/drugReminder/index" label="取消" class="btn cancel-btn"/>
      <mu-raised-button label="确认" class="btn" @click.native="confirmHandler" primary/>
    </div>
  </div>
</template>

<script>
import SelectRole2 from "../../components/SelectRole2.vue";
import empty from "@/components/empty";
import { formatDate } from "@/common/js/util";
import { commonAjaxJson, RESTFUL_API } from "../../api/api";
export default {
  data (){
    return {
      familyPerson: JSON.parse(sessionStorage.getItem("familyPerson")) || {},
      hospitalCode: sessionStorage.getItem("hospitalCode") || "",
      list: [],
      pageNo: 1,
      pageSize: 20,
      loading: false,
      scroller: null,
      isEmpty: false,
    }
  },
  components: { SelectRole2 },
  mounted (){
    this.scroller = this.$refs.scroller;
    this.getList();
  },
  methods: {
    selperson(val) {
      this.familyPerson = val;
      sessionStorage.familyPerson = JSON.stringify(val);
      this.init();
    },
    init (){
      this.pageNo = 1;
      this.list = [];
      this.getList();
    },
    getList (){
      let params = {
        hospitalCode: this.hospitalCode,
        patientCode: this.familyPerson.patientcode,
        pageNo: this.pageNo++,
        pageSize: this.pageSize,
      }
      this.loading = true;
      commonAjaxJson('medicationReminder/allPrescription', params, true).then(res => {
        this.loading = false;
        if(res.data.code === 200 && res.data.data && res.data.data.length > 0) {
          res.data.data.map(v => { 
            v.checked = false; 
            v.endTime = this.getEndDate(v.beginTime, v.cycle)
            v.rateName = v.methodName 
            v.pushFlag = false
            if(v.rateDay > 1) {
              v.remindDayList = String(v.rateCycle).split(",")
              let rateDayArr = []
              for(let j = 1; j <= v.rateDay; j++) {
                rateDayArr.push({label: `第${j}日`, value: String(j)})
              }
              v.rateDayArr = rateDayArr
            } else {
              v.remindDayList = []
            }
            v.remindTimesList = []
            let remindTimesList = v.rateHisTime.split(",")
            remindTimesList.map((val, index) => {
              v.remindTimesList.push({
                hour: val.split(":")[0],
                min: val.split(":")[1]
              })
            })
          })
          this.list = this.list.concat(res.data.data);
          if (res.data.data.length < this.pageSize) {
            this.scroller = null;
          }
        } else {
          this.scroller = null;
        }
      })
    },
    clickHandler (item){
      item.checked = !item.checked
    },
    confirmHandler (){
      let checkedList = this.list.filter(res => res.checked)
      if(checkedList.length == 0) {
        this.$store.commit('UPDATE_TOAST', {
          message: "请选择药品!"
        });
        return
      }
      this.$router.replace({
        path: "/drugReminder/addDrug",
        query: { list: JSON.stringify(checkedList) },
      })
    },
    getEndDate(start, n) {
      let startDate = new Date()
      if(start) {
        startDate = new Date(start);
      }
      if (typeof n === "number" && n !== 0) {
        startDate.setTime(startDate.getTime() + 24 * 60 * 60 * 1000 * n);
      }
      return formatDate(startDate, "yyyy-MM-dd");
    },
  }
}
</script>

<style lang="less" scoped>
.divider {
  height:1px;
  background:#e4e4e4;
  transform: scaleY(.5);
}
.content-title {
  padding: 10px 0;
  span {
    border-left: 4px solid #2ABC6D;
    padding-left: 10px; 
  }
}
.med_item {
  padding: 10px 0;
  .leftIcon {
    padding: 0 20px;
  }
  .drug-name {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    span {
      font-size: 12px;
      color: #999;
      font-weight: normal;
    }
  }
  .drug-instr {
    color: #999; 
  }
  .remind_time {
    color: #f60;
  }
}
.bottom-sheet {
  position: fixed;
  bottom: 0;
  width: 100%;
  .btn {
    width: 50%;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
  }
}

.iconOk{
  display: block;
  width:22px;
  height:22px;
  background-image: url("../../assets/iconfont-ok-checked.png");
  background-repeat: no-repeat;
  background-size:100%;
}
.iconOkGray{
  display: block;
  width:22px;
  height:22px;
  background-image: url("../../assets/iconfont-ok-disabled.png");
  background-repeat: no-repeat;
  background-size:100%;
}
</style>